<el-card shadow="never">
  <el-tabs value="first">
    <el-tab-pane label="资产领用" name="first">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <el-form :inline="true" :model="searchModel" size="small">
          <el-form-item label="资产ID">
            <el-input v-model="searchModel.number" placeholder="资产ID"></el-input>
          </el-form-item>
          <el-form-item label="合同号">
            <el-input v-model="searchModel.contractNamber" placeholder="合同号"></el-input>
          </el-form-item>
          <el-form-item label="资产名称">
            <el-input v-model="searchModel.name" placeholder="资产名称"></el-input>
          </el-form-item>
          <template v-if="toggleSearchStatus">
            <el-form-item label="批次">
              <el-input v-model="searchModel.batch" placeholder="批次"></el-input>
            </el-form-item>
            <el-form-item label="入库时间">
              <el-col class="dateCol" :span="11">
                <el-date-picker type="date" placeholder="开始时间" v-model="searchModel.inDate_begin" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col align="center" class="line" :span="1">~</el-col>
              <el-col class="dateCol" :span="11">
                <el-date-picker type="date" placeholder="结束时间" v-model="searchModel.inDate_end" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="分类编码">
              <el-input v-model="searchModel.code" placeholder="分类编码"></el-input>
            </el-form-item>

            <el-form-item label="资产大类">
              <el-select v-model="searchModel.classes" placeholder="请选择">
                <el-option key="1" label="土地" :value="1"></el-option>
                <el-option key="2" label="房屋及构筑物" :value="2"></el-option>
                <el-option key="3" label="通用设备" :value="3"></el-option>
                <el-option key="4" label="车辆" :value="4"></el-option>
                <el-option key="5" label="专用设备" :value="5"></el-option>
                <el-option key="6" label="文物及陈列品" :value="6"></el-option>
                <el-option key="7" label="图书档案" :value="7"></el-option>
                <el-option key="8" label="家具用具及装具" :value="8"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类名称">
              <el-input v-model="searchModel.typeName" placeholder="分类名称"></el-input>
            </el-form-item>
            <el-form-item label="购买单位">
              <el-input v-model="searchModel.buyer" placeholder="购买单位"></el-input>
            </el-form-item>
          </template>
          <el-form-item>
              <span style="float: left;overflow: hidden;" class="">
                  <el-button type="primary" @click="searchQuery" icon="el-icon-search">查询</el-button>
                  <el-button type="primary" @click="searchReset" icon="el-icon-refresh" style="margin-left: 8px">重置
                  </el-button>

                  <el-button @click="handleToggleSearch()" type="text" size="small">
                      {{ toggleSearchStatus ? '收起' : '展开' }}
                      <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                  </el-button>
              </span>
          </el-form-item>
        </el-form>
      </div>
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <el-button  icon="el-icon-check" size="small " class="addBtn" type="success" @click="handleUse">领用</el-button>
      </div>

      <!-- 资产列表 -->
      <div class="project">
        <el-table size="small"  @selection-change="handleSelectionChange" :data="dataSource" border style="width: 100%"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                  :default-sort="{prop: 'inboundDate', order: 'descending'}">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="number" fixed width="150" label="资产ID"></el-table-column>
          <el-table-column width="150"fixed prop="name" label="资产名称" sortable></el-table-column>
          <el-table-column width="150" prop="contractNamber" label="合同号"></el-table-column>
          <el-table-column width="110" prop="batch" label="批次" sortable></el-table-column>
          <el-table-column width="120" prop="inDate" label="入库日期" sortable></el-table-column>
          <el-table-column width="120" prop="price" label="单价（元）" sortable></el-table-column>
          <el-table-column width="300" label="规格型号" sortable>
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.model"  effect="light">
                <span> {{scope.row.model}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column width="110" prop="code" label="分类编码" sortable></el-table-column>
          <el-table-column width="120" label="资产大类" sortable>
            <template slot-scope="scope">
              {{ ['土地','房屋及构筑物','通用设备','车辆','专用设备','文物及陈列品','图书档案','家具用具及装具'][scope.row.classes-1] }}
            </template>
          </el-table-column>
          <el-table-column width="150" prop="typeName" label="分类名称" sortable></el-table-column>
<!--          <el-table-column width="150" prop="depreciationMonth" label="资产折旧总月数" sortable></el-table-column>-->
          <el-table-column width="200" prop="buyer" label="购买单位" sortable></el-table-column>
          <el-table-column width="100" prop="isFixed" label="固定资产"sortable>
            <template slot-scope="scope">
                {{scope.row.isFixed ? "是":"否"}}
            </template>
          </el-table-column>
          <el-table-column  width="100" prop="isFax" label="是否含税" sortable>
            <template slot-scope="scope">
              {{scope.row.isFixed ? "是":"否"}}
            </template>
          </el-table-column>
          <el-table-column label="使用状态">
            <template slot-scope="scope">
              {{ ['正常','损坏'][scope.row.useState-1] }}
            </template>
          </el-table-column>
          <el-table-column width="120" prop="usefulLife" label="使用期限" sortable></el-table-column>
          <el-table-column width="100" label="状态">
            <template slot-scope="scope">
              {{ ['闲置','已领用','已处置'][scope.row.state-1] }}
            </template>
          </el-table-column>
          <el-table-column width="150" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleDetail(scope.row)" type="text">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="ipagination.total" :page.sync="ipagination.current" :limit.sync="ipagination.pageSize"
                    :page-sizes="[20,50,100,150]"
                    @pagination="loadData"></pagination>
        <asset-modal ref="modalForm" @ok="modalFormOk"></asset-modal>
      </div>

      <div class="price">
        <h3>领取资产总值：<span>￥{{price}}</span></h3>
      </div>

    </el-tab-pane>
    <el-tab-pane label="领用记录" name="second">
      <use-record></use-record>
    </el-tab-pane>
  </el-tabs>
  <!-- 领用弹窗 -->
  <use-modal ref="assetForm" @ok="loadData"></use-modal>
</el-card>

